<template>
	<view class="lookDispatchSheet">
		<navBar title="资源调度单" goBackUrl="/pages/homePage/eventDetails" @goBack="goBack"></navBar>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="header" v-if="laborNum || personList.length > 0">人员调度</view>
				<view class="person" v-if="laborNum">
					<view class="nav-item">
						<view class="name">劳务人员</view>
						<view class="value">{{ laborNum }}人</view>
					</view>
				</view>
				<view class="uniCollapse person-collapse" v-if="personList.length > 0">
					<uni-collapse class="collapse">
						<uni-collapse-item title-border="show"  title="抢险人员">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										抢险人员
									</view>
									<view class="right">
										{{ personList.length }}人
									</view>
								</view>
							</template>
							<view class="col-item" v-for="item in personList" :key="item.id">
								<view class="name">{{ item.name }}</view>
								<view class="phone">{{ item.phone }}</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				
				<view class="header" v-if="deviceList.length > 0">设备调度</view>
				<view class="uniCollapse device-collapse"  v-if="deviceList.length > 0">
					<uni-collapse class="collapse">
						<uni-collapse-item title-border="show" v-for="item in deviceList" :key="item.name" :title="item.name">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.num }}
									</view>
								</view>
							</template>
							<view class="coll" v-for="(value, idx) in item.children" :key="idx">
								<view class="coll-item">
									<view class="name">规格型号： </view>
									<view class="value">{{ value.specificationModel }}</view>
								</view>
								<view class="coll-item">
									<view class="name">设备编号： </view>
									<view class="value">{{ value.code }}</view>
								</view>
								<view class="coll-item">
									<view class="name">所属基地： </view>
									<view class="value">{{ value.stationName }}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				
				<view class="header" v-if="materialList.length > 0">材料调度</view>
				<view class="uniCollapse device-collapse" v-if="materialList.length > 0">
					<uni-collapse class="collapse">
						<uni-collapse-item title-border="show" v-for="item in materialList" :key="item.name" :title="item.name">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.totalNum}}
									</view>
								</view>
							</template>
							<view class="coll" v-for="(value, i) in item.children" :key="i">
								<view class="coll-item">
									<view class="name">规格型号： </view>
									<view class="value">{{ value.specificationModel }}</view>
								</view>
								<view class="coll-item">
									<view class="name">出库数量： </view>
									<view class="value">{{ value.num }}{{ value.unit }}</view>
								</view>
								<view class="coll-item">
									<view class="name">所属基地： </view>
									<view class="value">{{ value.stationName }}</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getEventCostByEventId } from "@/api/emergency/emergencyDispatch.js";
	import uniCollapse from "./components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default {
		name: "lookDispatchSheet",
		components: {
			uniCollapse
		},
		data() {
			return {
				eventId: null,    // 事件id
				laborNum: null,   // 劳务人员数量
				personList: [],   // 人员列表
				deviceList: [],   // 设备列表
				materialList: [], // 材料列表
			}
		},
		onLoad(option) {
			this.eventId = option.eventId
			this.getEventInfoList(this.eventId)
		},
		methods: {
			// 资源调度详情
			async getEventInfoList(eventId){
				let res = await getEventCostByEventId({eventId})
				let data = res.result
				// 劳务人员
				this.laborNum = data.laborPerson ? data.laborPerson.num : null
				// 抢险人员
				this.personList = data.personList || []
				// 设备列表
				this.deviceList = this.arrayFilter(data.equipmentList, "subDeviceTypeName")
				// 材料列表
				// this.materialList = data.materialList
				// 根据 基地名称 材料名称 规格型号 分组
				let temp = this.getMaterialArray(data.materialList)
				// 在根据 材料名称 分组
				this.materialList = this.arrayFilter(temp[1], "name")
			},
			
			// 返回上一级
			goBack(url){
				uni.navigateBack({
					url: url
				})
			},
			
			/**
			* @description:  list 数组根据 stationName分组 num统计数量
			* @param {type}  list: 需要处理的数组  (原数组)
			* @param {type}  stationName: 用于判断相同的键名 
			* @return:       返回值: 数组
			*/
			arrayFilter(list, stationName){
				let obj = {}
				let newList = []
				for (let i = 0; i < list.length; i++) {
					let item = list[i]
					let str = item[stationName]
					if(obj[str]){
						obj[str].push(item)
					}else{
						obj[str]=[]
						obj[str].push(item)
					}
				}
				// 对象转数组
				if(stationName === "name"){
					for (let key in obj) {
						let value = obj[key]
						let totalNum = 0
						let unit = ""
						value.forEach(item=>{
							totalNum = totalNum + item.num
							unit = item.unit
						})
						let newkey = {name: key, totalNum:totalNum+unit, children: value}
						newList.push(newkey)
					}
				}else{
					for (let key in obj) {
						let value = obj[key]
						let newkey = {name: key, num:value.length, children: value}
						newList.push(newkey)
					}
				}
				
				return newList
			},
			
			// 根据 基地名称 材料名称 规格型号 分组
			getMaterialArray(newArr){
				let list = JSON.parse(JSON.stringify(newArr))
				let obj = {}
				for(let i = 0;i < list.length;i++) {
					let item = list[i]
					let str = item.stationName + '-' + item.name + "-" + item.specificationModel
					if(obj[str]){   
						obj[str].push(item)
					}else{
						obj[str] = []
						obj[str].push(item)
					}
				}
			
				let newList = []
				for (const key in obj) {
					let arr = obj[key]
					let num = 0
					for(let i = 0;i < arr.length;i++) {
						num = num +  +arr[i].costNum
					}
					let temp = {
						stationName: arr[0].stationName,
						name:  arr[0].name,
						specificationModel: arr[0].specificationModel,
						num: num,
						unit: arr[0].unit || "",
						costNum: 0,
					}
					newList.push(temp)
				}
				return [obj, newList]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lookDispatchSheet{
		width: 100%;
		/* #ifdef APP-PLUS  || H5 */
			height: 100%;
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		// height: 100%;
		
		.scroll-box{
			/* #ifdef APP-PLUS  || H5 */
				max-height: calc(100vh - 140rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			    max-height: calc(100vh - 200rpx);
			/* #endif */
			padding-top: 10rpx;
		}
		.content{
			
			height: 100%;
		}
		.header{
			padding: 0rpx 32rpx;
			padding-top: 0rpx;
			line-height: 120rpx;
			height: 120rpx;
			background-color: #F5F7FA;
			font-size: 36rpx;
			font-family: Noto Sans KR-Bold, Noto Sans KR;
			font-weight: bold;
			color: #445469;
			padding-left: 30rpx;
			box-sizing: border-box;
		}
		.person{
			padding: 0rpx 32rpx;
			.nav-item{
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.name{
					font-size: 28rpx;
					font-weight: 600;
					color: #445469;
				}
				.value{
					text-align: right;
					flex: 1;
					font-size: 28rpx;
					font-weight: bold;
					color: #22204E;
				}
			}
		}
		.person-collapse{
			padding: 0rpx 30rpx;
			.collapse{
				.col-item{
					display: flex;
					height: 100rpx;
					line-height: 100rpx;
					border-bottom: 2rpx solid #E2E5ED;
					padding: 0rpx 85rpx;
						
					.name{
						margin-right: 45rpx;
					}
					.phone{
						flex: 1;
					}
				}
			}
		}
		
		.device-collapse{
			padding: 0rpx 30rpx;
			.coll{
				padding: 0rpx 30rpx;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E2E5ED;
				.coll-item{
					margin-top: 20rpx;
					display: flex;
					
					.name{
						margin-left: 25rpx;
					}
					.value {
						max-width: 240rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.checkbox{
					position: absolute;
					top: 10rpx;
					right: 20rpx;
				}
			}
		}
		
	}
	::v-deep .navBar{
		margin: 0rpx;
		padding-top: 30rpx;
	}
	::v-deep .navBar .left{
		top: 44rpx;
	}
	::v-deep .uniCollapse .collapse-title{
		height: 100rpx;
		line-height: 100rpx;
	}
</style>
<style>
	page{
		height: 100%;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
	}
</style>